<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Sync Tool</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        #input-container {
            display: flex;
            flex-direction: column;
            padding: 10px 20px;
            background: #f4f4f4;
            border-bottom: 1px solid #ddd;
        }

        #input {
            width: 100%;
            padding: 8px;
            resize: none;
            box-sizing: border-box;
        }

        #send-button {
            padding: 8px 16px;
            margin-top: 10px;
            align-self: flex-start;
        }

        #messages {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        #messages li {
            display: flex;
            align-items: center;
            padding: 8px;
            margin-bottom: 4px;
            background: #fff;
            border-bottom: 1px solid #ddd;
        }

        .btn {
            margin-right: 10px;
            cursor: pointer;
        }

        pre {
            margin: 0;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    </style>
</head>

<body>
    <div id="input-container">
        <textarea id="input" rows="3" placeholder="Type a message..."></textarea>
        <div>
            <button id="send-button" onclick="sendMessage()">Send</button>
            <input id="file-input" type="file" name="file">
        </div>
    </div>
    <ul id="messages"></ul>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();

        const messages = document.getElementById('messages');
        const input = document.getElementById('input');

        socket.on('init', (msgs) => {
            messages.innerHTML = '';
            msgs.forEach((msg, index) => {
                addMessage(msg, index);
            });
        });

        socket.on('message', (msg) => {
            addMessage(msg, messages.children.length);
        });

        function addMessage(msg, index) {
            const li = document.createElement('li');
            li.dataset.index = index;

            const copyBtn = document.createElement('button');
            copyBtn.textContent = '复制';
            copyBtn.className = 'btn';
            copyBtn.onclick = () => {
                navigator.clipboard.writeText(msg.message).then(() => {
                    alert('Message copied to clipboard');
                });
            };

            const deleteBtn = document.createElement('button');
            deleteBtn.textContent = '删除';
            deleteBtn.className = 'btn';
            deleteBtn.onclick = () => {
                socket.emit('delete', index);
            };

            const messageContent = msg.message;
            const attachment = msg.attachment;

            const messageBody = document.createElement('div')
            if (messageContent) {
                const msgContent = document.createElement('pre');
                msgContent.textContent = messageContent;
                msgContent.style.flex = '1';
                messageBody.appendChild(msgContent);
            }

            if (attachment) {
                const attachmentLink = document.createElement('a');
                attachmentLink.href = attachment;
                attachmentLink.textContent = attachment;
                attachmentLink.target = '_blank';
                messageBody.appendChild(attachmentLink);
            }
            
            li.appendChild(deleteBtn);
            li.appendChild(copyBtn);
            li.appendChild(messageBody);
            messages.appendChild(li);
        }

        function sendMessage() {
            const msg = input.value.trim();

            var files = $('#file-input')[0].files;
            if (files.length > 0) {
                var file = files[0];
                var data = new FormData();
                data.append('message', msg);
                data.append('file', file);
                $.ajax({
                    url: '/upload',
                    type: 'POST',
                    data: data,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        input.value = '';
                        $('#file-input').val('');
                        console.log(response);
                    }
                });
            } else {
                if (msg) {
                    socket.emit('message', 
                        {
                            message: msg,
                            time: new Date().toLocaleString(),
                            attachment: null
                        }
                    );
                    input.value = '';
                }
            }
        }

    </script>
</body>

</html>